<!-- 用户设置页面 -->
<template>
	<view class="user-setting">
		
		<view class="user-setting__avatar">
			<image src="/static/images/userAvatar.jpg" mode="aspectFill" class="user-setting__avatar-img"></image>
			<view class="user-setting__avatar-edit">
				编辑头像
			</view>
		</view>
		
		<view class="user-setting__info">
			
			<view class="user-setting__info-item flex" @click="onClickToModify(userStore.userInfo.username, '修改用户名')">
				<view class="user-setting__info-desc">
					<text class="user-setting__info-title">用户名</text>
					<text>{{userStore.userInfo.username}}</text>
				</view>
				<image class="user-setting__info-arrow" src="/static/images/rightArrow.png" mode="aspectFill"></image>
			</view>
			
			<view class="user-setting__info-item flex" @click="onClickToModify(userStore.userInfo.gender, '修改性别')">
				<view class="user-setting__info-desc">
					<text class="user-setting__info-title">性别</text>
					<text>{{userStore.userInfo.gender}}</text>
				</view>
				<image class="user-setting__info-arrow" src="/static/images/rightArrow.png" mode="aspectFill"></image>
			</view>
			
			<view class="user-setting__info-item flex" @click="onClickToModify(userStore.userInfo.intro || '没有个人简介~', '修改简介')">
				<view class="user-setting__info-desc">
					<text class="user-setting__info-title">简介</text>
					<text>{{userStore.userInfo.intro || '暂无'}}</text>
				</view>
				<image class="user-setting__info-arrow" src="/static/images/rightArrow.png" mode="aspectFill"></image>
			</view>
			
			<view class="user-setting__info-item flex" @click="onClickToModify(userStore.userInfo.phone, '修改手机号')">
				<view class="user-setting__info-desc">
					<text class="user-setting__info-title">手机号</text>
					<text>{{userStore.userInfo.phone}}</text>
				</view>
				<image class="user-setting__info-arrow" src="/static/images/rightArrow.png" mode="aspectFill"></image>
			</view>
			
			<view class="user-setting__info-item flex" @click="onClickToModify(userStore.userInfo.school, '修改学校')">
				<view class="user-setting__info-desc">
					<text class="user-setting__info-title">学校</text>
					<text>{{userStore.userInfo.school}}</text>
				</view>
				<image class="user-setting__info-arrow" src="/static/images/rightArrow.png" mode="aspectFill"></image>
			</view>

			<view class="user-setting__info-item flex" @click="onClickToModify(userStore.userInfo.password, '修改密码')">
				<view class="user-setting__info-desc">
					<text class="user-setting__info-title">密码</text>
					<text>{{userStore.userInfo.password}}</text>
				</view>
				<image class="user-setting__info-arrow" src="/static/images/rightArrow.png" mode="aspectFill"></image>
			</view>
			
		</view>
		
		<view class="user-setting__btn" @click="handleLogout">退出登录</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { getUserInfo, userLogout } from '@/utils/apis.js';
	import { userStore } from '@/store/userStore.js';

	// 获取用户信息
	async function getUserInfoData() {
		try {
			const res = await getUserInfo()
			if(res.code === 200) {
				// 更新全局用户信息
				Object.assign(userStore.userInfo, res.data.userInfo);
				userStore.setLoginStatus(true);
			}
		} catch(e) {
			console.error('获取用户信息失败', e)
		}
	}

	onMounted(() => {
		// 初始化用户信息
		userStore.initUserInfo();
		// 如果已登录，则获取最新用户信息
		if (userStore.isLogin) {
			getUserInfoData();
		}
	})

	function onClickToModify(info, title) {
		uni.navigateTo({
			url: `/pages/user/userModify/userModify?info=${info}&title=${title}`
		})
	}

	// 退出登录
	async function handleLogout() {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: async function (res) {
				if (res.confirm) {
					try {
						const res = await userLogout()
						// 使用全局状态管理退出登录
						userStore.logout();
						
						uni.showToast({
							title: '退出成功',
							icon: 'success'
						})
						
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1500)
					} catch(e) {
						uni.showToast({
							title: '退出失败，请稍后重试',
							icon: 'none'
						})
					}
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
.user-setting{
	width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	padding-top: 50rpx;
	background-color: #f2f2f2;
	
	&__avatar{
		width: 140rpx;
		margin: 0 auto;
		margin-bottom: 47rpx;
		&-img{
			width: 140rpx;
			height: 140rpx;
			margin-bottom: 30rpx;
			// aspect-ratio: 1/1;
		}
		
		&-edit{
			width: 140rpx;
			height: 54rpx;
			text-align: center;
			line-height: 54rpx;
			font-size: 28rpx;
			color: #333333;
			background-color: #fff;
			border-radius: 15rpx;
		}
		
	}
	
	&__info{
		width: 690rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 18rpx 0;
		&-item{
			justify-content: space-between;
			height: 30rpx;
			margin-bottom: 36rpx;
			&:nth-last-child(1){
				margin-bottom: 0;
			}
		}
		
		&-desc{
			font-size: 28rpx;
			color: #333333;
			margin-left: 45rpx;
		}
		
		&-title{
			width: 120rpx;
			display: inline-block;
		}
		
		&-arrow{
			width: 30rpx;
			height: 30rpx;
			margin-right: 25rpx;
		}
	}
	
	&__btn{
		width: 210rpx;
		height: 93rpx;
		line-height: 93rpx;
		text-align: center;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #333333;
		background-color: #b4ddee;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: 200rpx;
	}
}
</style>
